<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button>0</button>
<button>1</button>
<button>2</button>
<button>3</button>
</body>
<script>
    // 点击某个按钮, 提示"点击的是第n个按钮"
    const btns = document.querySelectorAll("button");
    // for(var i=0;i<btns.length;i++){
    //     btns[i].onclick = function(){
    //         console.log(i);
    //     }
    // }
    // 以上代码相当于：
    // var i = 0;
    // btns[i].onclick = function(){
    //     console.log(i);
    // }
    // i++;
    // btns[i].onclick = function(){
    //     console.log(i);
    // }
    // i++;
    // btns[i].onclick = function(){
    //     console.log(i);
    // }
    // i++;
    // btns[i].onclick = function(){
    //     console.log(i);
    // }
    // i++;
    // console.log(i);


    // 解决方案一
    // for(let i=0;i<btns.length;i++){
    //     btns[i].onclick = function(){
    //         console.log(i);
    //     }
    // }
    // 相当于：
    // {
    //     let i = 0;
    //     btns[i].onclick = function(){
    //         console.log(i);
    //     }
    // }
    // {
    //     let i = 1;
    //     btns[i].onclick = function(){
    //         console.log(i);
    //     }
    // }
    // {
    //     let i = 2;
    //     btns[i].onclick = function(){
    //         console.log(i);
    //     }
    // }
    // {
    //     let i = 3;
    //     btns[i].onclick = function(){
    //         console.log(i);
    //     }
    // }
    // console.log(i)


    // 解决方案二
    // for(var i=0;i<btns.length;i++){
    //     btns[i].index = i;
    //     btns[i].onclick = function(){
    //         console.log(this.index);
    //     }
    // }

    // 解决方案三
    // btns.forEach(function(btn,index){
    //     btn.onclick = function(){
    //         console.log(index)
    //     }
    // })

    // 解决方案四
    // for(var i=0;i<btns.length;i++){
    //     btns[i].onclick = (function(i){
    //         return function(){
    //             console.log(i);
    //         }
    //     })(i);
    // };
    // 相当于
    var i=0;
    btns[i].onclick = (function(j){
        return function(){
            console.log(j);
        }
    })(i);
    i++;
    btns[i].onclick = (function(j){
        return function(){
            console.log(j);
        }
    })(i);
    i++;
    btns[i].onclick = (function(j){
        return function(){
            console.log(j);
        }
    })(i);
    i++;
    btns[i].onclick = (function(j){
        return function(){
            console.log(j);
        }
    })(i);
    i++;

</script>
</html>